<template>
	<view class="insurance-page">
		<u-navbar leftIconColor="#fff" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="right">
				<u-icon name="setting" color="#fff" size="22"></u-icon>
			</view>
		</u-navbar>
		<view style="height: 100rpx;">

		</view>
		<view class="content">
			<view class="name">
				经理姓名：张一一
			</view>
			<view class="box">
				<view class="ensure-top">
					<view>
						<view class="top-text">
							账户保证金
						</view>
						<view class="top-num">
							85600
						</view>
					</view>
					<view class="top-btn">
						提款
					</view>
				</view>
				<view class="ensure">
					<view class="ensure-item">
						<view class="ensure-text">
							名下会员
						</view>
						<view class="ensure-num">
							55
						</view>
					</view>
					<view class="ensure-item">
						<view class="ensure-text">
							保单预期会员
						</view>
						<view class="ensure-num new-num">
							6
						</view>
					</view>
				</view>
				<view class="ensure">
					<view class="ensure-item">
						<view class="ensure-text new-text">
							每月预计收入
						</view>
						<view class="ensure-num">
							6000
						</view>
					</view>
					<view class="ensure-item">
						<view class="ensure-text new-text">
							已获得总收入
						</view>
						<view class="ensure-num">
							120000
						</view>
					</view>
				</view>
			</view>
			<view class="steps">
				<u-steps :current="current" :dot="true" activeColor="#18BE8C">
					<u-steps-item title="保单申请(2)"></u-steps-item>
					<u-steps-item title="逾期保单(3)"></u-steps-item>
					<u-steps-item title="会员列表"></u-steps-item>
				</u-steps>
			</view>
			<view v-if="current == 0">
				<view class="box">
					<view class="item">
						<view class="item-left">
							保单编号
						</view>
						<view class="item-right">
							TW0356Y2025021105644
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							姓名
						</view>
						<view class="item-right">
							张欢欢
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							保单每月缴纳
						</view>
						<view class="item-right">
							5000
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							总期数
						</view>
						<view class="item-right">
							264
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							已缴纳期数
						</view>
						<view class="item-right">
							14
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							本次缴纳期数
						</view>
						<view class="item-right">
							1
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							本次缴纳总金额
						</view>
						<view class="item-right">
							5000
						</view>
					</view>
					<view class="bottom-content">
						<view class="bottom-btn" @click="handleShow(1)">
							确认
						</view>
						<view class="bottom-btn reject" @click="handleShow(2)">
							驳回
						</view>
					</view>
				</view>
				<view class="box">
					<view class="item">
						<view class="item-left">
							保单编号
						</view>
						<view class="item-right">
							TW0356Y2025021105644
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							姓名
						</view>
						<view class="item-right">
							张欢欢
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							保单每月缴纳
						</view>
						<view class="item-right">
							5000
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							总期数
						</view>
						<view class="item-right">
							264
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							已缴纳期数
						</view>
						<view class="item-right">
							14
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							本次缴纳期数
						</view>
						<view class="item-right">
							1
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							本次缴纳总金额
						</view>
						<view class="item-right">
							5000
						</view>
					</view>
					<view class="bottom-content">
						<view class="bottom-btn">
							确认
						</view>
						<view class="bottom-btn reject">
							驳回
						</view>
					</view>
				</view>
			</view>
			<view v-if="current == 1">
				<view class="box">
					<view class="item">
						<view class="item-left">
							保单编号
						</view>
						<view class="item-right">
							TW0356Y2025021105644
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							姓名
						</view>
						<view class="item-right">
							张欢欢
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							保单每月缴纳
						</view>
						<view class="item-right">
							5000
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							保单总期数
						</view>
						<view class="item-right">
							264
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							已缴纳期数
						</view>
						<view class="item-right">
							14
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							已逾期
						</view>
						<view class="item-right overdue">
							3
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							需缴纳
						</view>
						<view class="item-right">
							9000
						</view>
					</view>
					<view class="tips">
						(请经理联系会员尽快缴纳逾期保单)
					</view>
				</view>
			</view>
			<view v-if="current == 2">
				<view class="box">
					<view class="item">
						<view class="item-left">
							姓名
						</view>
						<view class="item-right">
							张三
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							账户总保单
						</view>
						<view class="item-right assemble">
							<view class="assemble-text">
								5
							</view>
							<u-icon name="arrow-right" color="#18BE8C" size="18"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							账户每月总缴纳
						</view>
						<view class="item-right">
							13000
						</view>
					</view>
				</view>
				<view class="box">
					<view class="item">
						<view class="item-left">
							姓名
						</view>
						<view class="item-right">
							张三
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							账户总保单
						</view>
						<view class="item-right assemble">
							<view class="assemble-text">
								5
							</view>
							<u-icon name="arrow-right" color="#18BE8C" size="18"></u-icon>
						</view>
					</view>
					<view class="item">
						<view class="item-left">
							账户每月总缴纳
						</view>
						<view class="item-right">
							13000
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
		<u-popup :show="show" @close="close" mode="center" round="20">
			<view class="pop">
				<view v-if="status == 1">
					<view class="pop-title">
						确认收到会员保单款项5000?
					</view>
					<view class="pop-bottom">
						<view class="pop-btn" @click="close">
							取消
						</view>
						<view class="pop-btn new-btn">
							确认
						</view>
					</view>
				</view>
				<view v-if="status == 2">
					<view class="pop-title">
						是否驳回此保单
					</view>
					<view class="pop-bottom">
						<view class="pop-btn" @click="close">
							取消
						</view>
						<view class="pop-btn new-btn">
							确认
						</view>
					</view>
				</view>
				<view v-if="status == 3">
					<view class="pop-title">
						经理账户保证金不足， 请联系客服专员充值保证金。
					</view>
					<view class="pop-bottom">
						<view class="pop-btn new-btn" @click="close">
							确认
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				current: 0,
				show:false,
				status:3
			}
		},
		methods:{
			close(){
				this.show = false
			},
			handleShow(num){
				this.status = num
				this.show = true
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.insurance-page {
		background-image: url('../../../static/insurance/insurance-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 450rpx;
		.pop {
			width: 480rpx;
			background: linear-gradient( 180deg, #C9FFEF 0%, #FFFFFF 100%);
			padding: 30rpx;
			border-radius: 20rpx;
			text-align: center;
			.pop-title {
				font-weight: bold;
				color: #333333;
				font-size: 28rpx;
				margin-top: 30rpx;
			}
			.pop-bottom {
				display: flex;
				justify-content: space-around;
				margin-top: 70rpx;
				.pop-btn {
					padding: 15rpx 65rpx;
					border-radius: 30rpx;
					background-color: #F9F9F9;
					color: #666666;
					font-size: 26rpx;
				}
				.new-btn {
					background-color: #18BE8C;
					color: #fff;
				}
			}
		}

		.content {
			padding: 20rpx;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			background-color: #FBFBFB;

			.box {
				background-color: #fff;
				border-radius: 30rpx;
				box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);
				margin-top: 30rpx;
				padding: 20rpx;

				.ensure-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.top-text {
						color: #333333;
						font-size: 28rpx;
					}

					.top-num {
						color: #18BE8C;
						font-weight: bold;
						font-size: 48rpx;
					}

					.top-btn {
						padding: 15rpx 55rpx;
						border-radius: 30rpx;
						color: #18BE8C;
						font-size: 28rpx;
						background-color: rgba(24, 190, 140, 0.16);
					}
				}

				.ensure {
					margin-top: 20rpx;
					padding: 30rpx;
					background-color: #F9F9F9;
					border-radius: 30rpx;
					display: flex;
					justify-content: space-around;

					.ensure-item {
						text-align: center;

						.ensure-text {
							color: #999999;
							font-size: 24rpx;
						}

						.ensure-num {
							font-size: 40rpx;
							color: #333333;
							font-weight: bold;
							margin-top: 10rpx;
						}

						.new-text {
							color: #333333;
						}

						.new-num {
							color: #FF6767;
						}
					}
				}
			}

			.steps {
				margin-top: 30rpx;
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
				margin-bottom: 15rpx;

				.item-left {
					color: #666666;
				}

				.item-right {
					color: #333333;
				}

				.overdue {
					color: #FF6767;
				}

				.assemble {
					color: #18BE8C;
					display: flex;
					align-items: center;

					.assemble-text {
						margin-right: 10rpx;
					}
				}
			}

			.bottom-content {
				display: flex;
				justify-content: center;
				margin-top: 20rpx;
				border-top: 1rpx solid #F1F1F1;
				padding-top: 20rpx;

				.bottom-btn {
					padding: 15rpx 85rpx;
					background-color: #18BE8C;
					border-radius: 40rpx;
					color: #fff;
					font-size: 28rpx;
				}

				.reject {
					background-color: #FF6767;
					margin-left: 30rpx;
				}
			}

			.tips {
				color: #FF5050;
				font-size: 24rpx;
			}
		}
	}
</style>